<template>
	<div class="product-preview box-model">
		<div class="padding-left-right-15">
			<div class="product-preview-title">
				<div class="icon-left"></div>
				<div class="icon-text">港险概览</div>
				<div class="icon-right"></div>
			</div>
			<div class="swiper-container swiper-container-horizontal swiper-container-free-mode swiper-container-ios">
				<div class="swiper-wrapper">
					<template v-for="(item,$index) in previewdata">
						<div class="swiper-slide">
							<div class="insurance-over-box">
								<img src="../../../static/banner.jpg">
							</div>
							<div class="insurance-over-titel">{{item.product.title}}</div>
							<div class="insurance-over-subhead">{{item.product.subhead}}</div>
						</div>
					</template>
				</div>
			</div>
			<div class="hk-insurance-more">
				查看更多
				<i class="review-more"></i>
			</div>
		</div>
	</div>
</template>
<script>
	import Swiper from 'swiper'
	import 'swiper/dist/css/swiper.min.css'
	export default{
		props:['previewdata'],
		mounted:function(){
			this.$nextTick(function () {
				let swiper = new Swiper('.swiper-container', {
					slidesPerView: 'auto',
					freeMode:true,
					freeModeMomentum:true,
					freeModeMomentumRatio : 2,
					freeModeMomentumVelocityRatio:2,
					spaceBetween: 10,
					autoplayDisableOnInteraction:false,
					observer:true,
					observeParents:true,
				})
			})
		}
	}
</script>
<style scoped="scoped">
	.product-preview{
		position: relative;
		background: #FFFFFF;
		width: 100%;
	}
	.product-preview-title{
		padding: 15px 0;
		margin: auto;
		width: 50%;
		overflow: hidden;
	}
	.product-preview-title
	.icon-left{
		background-image: url(../../assets/images/app-icon/app-home-insurance-left.png);
		background-repeat:no-repeat;
		height: 2px;
		width: 20%;
		margin-top: 10px;
		float: left;
	}
	.product-preview-title
	.icon-text{
		width: 60%;
		float: left;
		font-size: 16px;
		font-weight: 600;
		text-align: center;
	}
	.product-preview-title
	.icon-right{
		background-image: url(../../assets/images/app-icon/app-home-insurance-right.png);
		background-repeat:no-repeat;
		height: 2px;
		width: 20%;
		margin-top: 8px;
		float: left;
	}
	.swiper-slide{
		width: 159px;
		float: left;
	}
	.insurance-over-box 
	img {
		width: 159px;
		height: 119px;
	}
	.insurance-over-titel{
		margin-top: 10px;
		margin-bottom: 4.5px;
		width: 100%;
		font-size: 15px;
		color: #333333;
		white-space: nowrap;
		text-overflow:ellipsis;
		text-overflow: ellipsis;
		overflow:hidden;
		text-align: left;
	}
	.insurance-over-subhead{
		margin-bottom: 10px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: 13px;
		color: #666666;
		text-align: left;
	}
	.hk-insurance-more{
		width: 100%;
		padding-bottom: 15px;
		font-size: 12px;
		color: #F08800;
		position: relative;
		text-align: center;
	}
	.hk-insurance-more
	.review-more{
		position: absolute;
		width: 13px;
		height: 12.5px;
		top: 3px;
		margin-left: 5px;
		background: url(../../assets/images/app-icon/app-icon-home-more.png);
		background-size: cover; 
		display: inline-block;
	}
</style>